<template>
    <div style="width: 1000px;  margin:auto;">
        <el-card>
            <el-alert
                    title="发布求购信息"
                    :closable="false"
                    center
                    show-icon
                    type="info">
            </el-alert>
            <el-form
                    ref="addFormRef"
                    :model="addForm"
                    :rules="addFormRules"
                    label-width="80px"
                    label-position="top">
                <el-tabs
                        :tab-position="'left'">
                    <el-tab-pane label="基本信息:" name="0">
                        <el-form-item label="求购商品名称:" prop="wantName">
                            <el-input v-model="addForm.wantName"></el-input>
                        </el-form-item>
                        <el-form-item label="商品分类:" prop="categoryName" >
                            <el-select v-model="addForm.categoryName" :onchange="getCategoryId(addForm.categoryName)" placeholder="选择商品类型">
                                <el-option
                                        v-for="item in cateList"
                                        :key="item.categoryId"
                                        :label="item.categoryName"
                                        :value="item.categoryName"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="求购商品描述内容:" prop="wantContent">
                            <el-input v-model="addForm.wantContent"></el-input>
                        </el-form-item>
                        <el-form-item label="商品理想求购价格" prop="sellPrice">
                            <el-input v-model="addForm.sellPrice" type="number"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="btnAdd" @click="addGoods">添加求购商品信息</el-button>
                            <el-button @click="resetForm('addFormRef')">重置</el-button>
                        </el-form-item>

                    </el-tab-pane>

                </el-tabs>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    import _ from 'lodash'
    export default {
        name: "AddWantedGoods",
        data() {
            return {
                activeIndex: "0", // 当前激活的索引
                cateList: "",// 商品分类列表数据,
                // 添加商品的表单数据对象
                addForm: {
                    wantName: "",
                    sellPrice: 0,
                    goods_cat: [],// 商品所属的分类数据
                    categoryName:"手机",
                    goodType:0,
                    wantContent:'',
                    userName:this.$store.getters.getUser.username,
                    studentId:this.$store.getters.getUser.userId,
                    school:this.$store.getters.getUser.school,
                    userImg:this.$store.getters.getUser.headPic,
                    qq:this.$store.getters.getUser.qq,
                    phone:this.$store.getters.getUser.phone,
                },
                // 添加商品表单的验证规则对象
                addFormRules: {
                    wantName: [
                        { required: true, message: "请输入求购商品名称", trigger: "blur" }
                    ],

                    wantContent: [
                        { required: true, message: "请输入求购商品的详细介绍内容", trigger: "blur" }
                    ],
                    sellPrice: [
                        { required: true, message: "请输入求购商品理想价格", trigger: "blur" }
                    ],
                    goods_cat: [
                        { required: true, message: "请选择商品分类", trigger: "blur" }
                    ]
                },
            };
        },
        created() {
            this.getCategory();
        },
        methods: {
            // 获取所有商品分类数据
            getCategory() {
                this.$axios
                    .get("/api/goods-category/findAllCategory")
                    .then(res => {
                        this.cateList = res.data;
                    }).catch(err => {
                    return Promise.reject(err);
                });
            },
            getCategoryId(cateName){
                for(var j=0; j<this.cateList.length; j++){
                    if(this.cateList[j].categoryName  == cateName){
                        this.addForm.goodType =this.cateList[j].categoryId;
                        return this.cateList[j].categoryId;
                    }
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.addForm.photo = '';
            },
            // 点击按钮，添加商品
            addGoods() {
                this.$refs.addFormRef.validate(valid => {
                    // 预校验
                    if(!valid) {
                        return this.$message.error('请先填写必填项！')
                    }
                    // 执行添加的业务逻辑
                    const form = _.cloneDeep(this.addForm)
                    // 请求服务器接口，添加商品window.location.reload();
                    this.$axios.post(
                        "/api/wanted-goods/insertWantedGoods",form
                    ).then(res => {
                        if (res.data !== "add_success") {
                            return this.$message.error(res.data);
                        }
                        // 路由导航对象.push函数，跳转到指定的路由页面
                        this.$message.success('发布求购商品成功！')
                        //清空表单
                        this.resetForm('addFormRef')

                        this.$router.push('/wantedGoods')
                    }).catch(err => {
                        return Promise.reject(err);
                    })
                })
            }
        },
        computed: {
            uploadDisabled:function() {
                return this.addForm.picsList.length >0
            },

        },

    };
</script>

<style scoped>
    .el-checkbox {
        margin: 0 10px 0 0 !important;
    }

    .previewImg{
        width: 100%;
    }

    .btnAdd{
        margin-top: 15px;
    }
</style>